<template>
  <div>
    <van-tabs v-model="payActive" @change="payChange" title-active-color="#F15353">
      <van-tab title="支付记录">
        <div class="tab-list flex-a-c flex-j-sa">
          <block v-for="(item,index) in paymentList" :key="index">
            <div class="tab-item" :class="index === paymentIndex ?'on':''" @click="paymentOn(index,item.status,0)">{{item.name}}</div>
          </block>
        </div>
        <div>
          <keep-alive>
            <pay-list  @recordClick="recordClick" :payData="paylogList"></pay-list>
          </keep-alive>
        </div>
      </van-tab>
      <van-tab title="押金记录">
        <div class="tab-list flex-a-c flex-j-sa">
          <block v-for="(item,index) in cashList" :key="index">
            <div class="tab-item" :class="index === cashIndex ?'on':''" @click="paymentOn(index,item.status,1)">{{item.name}}</div>
          </block>
        </div>
        <keep-alive>
          <pledge-record :payData="paylogList" ></pledge-record>
        </keep-alive>
        
      </van-tab>
    </van-tabs>
    <div  :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']" class="pay-bottom"></div>
    <deduct-popup v-model="deductShow" @deductOpen="deductOpen" :deductionData="deductionData" ></deduct-popup>
  </div>
</template>
<script>
import period_pay_controller from './period_pay_controller';
export default period_pay_controller;
</script>
<style lang="scss" scoped>
  .tab-list {
    padding: 8px 12px;

    .tab-item {
      font-size: 12px;
      line-height: 12px;
      color: #aaaab3;
      padding: 6px 12px;
      cursor: pointer;
    }

    .on {
      border: 1px solid #f15353;
      border-radius: 18px;
    }
  }

  .pay-bottom {
    padding-bottom: 30px;
    box-sizing: border-box;
  }

  .iphoneXStyle {
    padding-bottom: 34px;
    box-sizing: border-box;
  }
</style>